import Header from "../../components/Header/Header.tsx";
import BookCard from "../../components/BookCard/BookCard.tsx";
import {Button, Carousel} from 'antd';
import {BookOutlined, LeftOutlined, RightOutlined} from '@ant-design/icons';
import {useEffect, useRef, useState} from 'react';
import Footer from "../../components/Footer/Footer.tsx";
import { useNavigate } from 'react-router-dom';
import {listBanner} from "../../api/bannerController.ts";
import { listBookByPage } from "../../api/bookController.ts";

export default function Home() {
    const carouselRef = useRef<any>(null);
    const navigate = useNavigate();
    const [carouselData, setCarouselData] = useState<Array<{
        id: string;
        bannerurl: string;
        bannertitle: string;
        createtime: string;
        updatetime: string;
    }>>([]);
    const [bookData, setBookData] = useState<Array<{
        id: string;
        imageurl: string;
        bookname: string;
        bookdesc: string;
        publishdate: string;
    }>>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchBanners = async () => {
            try {
                const response = await listBanner();
                setCarouselData(response.data);
            } catch (error) {
                console.error('返回banner列表错误', error);
            }
        };
        fetchBanners();
    }, []);

    useEffect(() => {
        const fetchBooks = async () => {
            try {
                const response = await listBookByPage({
                    current: 1,
                    pageSize: 8,
                    bookname: "",
                    bookauthor: "",
                    categorycode: ["all"]
                });
                if (response.code === 200 && response.data?.records) {
                    setBookData(response.data.records);
                }
            } catch (error) {
                console.error('获取图书列表失败', error);
            } finally {
                setLoading(false);
            }
        };
        fetchBooks();
    }, []);

    // 上一张
    const handlePrev = () => {
        carouselRef.current?.prev();
    };

    // 下一张
    const handleNext = () => {
        carouselRef.current?.next();
    };

    // 查看详情处理函数
    const handleViewDetail = (bookId: number) => {
        console.log('查看图书详情:', bookId);
        // 这里可以添加导航到详情页的逻辑
    };

    return (
        <div className="h-screen flex flex-col overflow-y-auto">
            <Header />
            {/* 轮播图容器 */}
            <div className="relative mt-4 mx-auto max-w-[1480px] w-full px-0 sm:px-4">
                <Carousel
                    ref={carouselRef}
                    autoplay
                    dots={true}
                    className="w-full"
                >
                    {carouselData.map(item => (
                        <div key={item.id} className="h-[180px] sm:h-[400px] md:h-[450px] lg:h-[500px] xl:h-[500px]">
                            <img
                                src={item.bannerurl}
                                alt={item.bannertitle}
                                className="w-full h-full object-cover rounded-none sm:rounded-lg"
                            />
                        </div>
                    ))}
                </Carousel>

                {/* 左右切换按钮 */}
                <button
                    onClick={handlePrev}
                    className="absolute left-1 sm:left-4 lg:left-8 top-1/2 -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 rounded-full flex items-center justify-center transition-all"
                >
                    <LeftOutlined className="text-xs sm:text-sm lg:text-base" />
                </button>
                <button
                    onClick={handleNext}
                    className="absolute right-1 sm:right-4 lg:right-8 top-1/2 -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 rounded-full flex items-center justify-center transition-all"
                >
                    <RightOutlined className="text-xs sm:text-sm lg:text-base" />
                </button>
            </div>

            {/* 图书列表区域 */}
            <div className="mx-auto max-w-[1480px] w-full px-4 mt-3">
                <div className="flex items-center justify-between">
                    <h2 className="text-xl font-bold mb-2">推荐图书</h2>
                    <a 
                        href="#" 
                        className="flex items-center text-gray-600 hover:text-blue-600 transition-colors duration-300"
                        onClick={(e) => {
                            e.preventDefault();
                            navigate('/recommend-books');
                        }}
                    >
                        <BookOutlined className="mr-1" />
                        <span>查看更多</span>
                    </a>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">
                    {bookData.map(book => (
                        <BookCard
                            key={book.id}
                            book={{
                                id: Number(book.id),
                                image: book.imageurl,
                                name: book.bookname,
                                title: book.bookdesc,
                                publishTime: book.publishdate.split(' ')[0]
                            }}
                            onViewDetail={handleViewDetail}
                        />
                    ))}
                </div>
            </div>

            <div className="flex-grow"></div>
            <Footer />
        </div>
    );
}


